<template>
  <div class="login-container">
    <van-nav-bar
      title="登陆"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <van-cell-group>
      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('cellphone')}">
        <div class="van-cell__title"><span>手机号</span></div>
        <div class="van-cell__value">
          <input v-model="formModel.cellphone" v-validate="'required|min:6'" name="cellphone" type="text" placeholder="请输入手机号" class="van-field__control">
          <div v-if="errors.has('cellphone')" class="van-field__error-message">{{ errors.first('cellphone') }}</div>
        </div>
      </div>

      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('password')}">
        <div class="van-cell__title"><span>新密码</span></div>
        <div class="van-cell__value">
          <input v-model="formModel.password" v-validate="'required|min:6'" name="password" type="password" placeholder="请输入新密码" class="van-field__control">
          <div v-if="errors.has('password')" class="van-field__error-message">{{ errors.first('password') }}</div>
        </div>
      </div>

      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('captcha')}">
        <div class="van-cell__title"><span>验证码</span></div>
        <div class="van-cell__value">
          <input v-model="formModel.captcha" v-validate="'required|min:4'" name="captcha" type="text" placeholder="请输入验证码" class="van-field__control">
          <div v-if="errors.has('captcha')" class="van-field__error-message">{{ errors.first('captcha') }}</div>
        </div>
        <div class="van-field__button">
          <button v-if="!captcha.sendMsgDisabled" class="van-button van-button--primary van-button--small" @click="sendCaptcha"><span class="van-button__text">发送验证码</span></button>
          <button v-if="captcha.sendMsgDisabled" class="van-button van-button--primary van-button--small" disabled="disabled"><span class="van-button__text">{{captcha.time+'秒后获取'}}</span></button>
        </div>
      </div>

      <van-button size="large" type="primary" @click="onSubmit">修改</van-button>

      <div class="van-cell"><router-link class="van-cell__value" :to="{name:'login'}">立即登陆</router-link></div>
    </van-cell-group>
  </div>
</template>

<script>
import qs from 'qs';
import { NavBar, Field, CellGroup, Button, Toast } from 'vant';
import ajaxVant from '../../utils/ajaxVant';

export default {
  data() {
    return {
      captcha: {
        time: 60,
        sendMsgDisabled: false
      },
      formModel: {
        account: '',
        password: '',
        captcha: '',
        captchaToken: ''
      }
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button
  },
  methods: {
    sendCaptcha() {
      var _this = this;
      if (_this.formModel.cellphone !== null && _this.formModel.cellphone !== undefined && _this.formModel.cellphone !== '') {
        ajaxVant.get('/sendCaptcha?cellphone=' + _this.formModel.cellphone).then(function(data) {
          if (data !== false) {
            Toast(data.msg);
            _this.formModel.captchaToken = data.captcha_token;
            _this.captcha.sendMsgDisabled = true;
            const timer = setInterval(() => {
              if (_this.captcha.time > 0) {
                _this.captcha.time -= 1;
              } else {
                clearInterval(timer);
                _this.captcha.time = 60;
                _this.captcha.sendMsgDisabled = false;
              }
            }, 1000);
          }
        });
      } else {
        Toast('请输入手机号!');
      }
    },
    onSubmit() {
      var _this = this;
      this.$validator.validateAll().then((result) => {
        if (result) {
          ajaxVant.post('/forgetPassword', qs.stringify(_this.formModel)).then(function(data) {
            if (data !== false) {
              Toast(data.msg);

              setTimeout(() => {
                Toast.clear();
                _this.$router.push({ name: 'login' });
              }, 1000);
            }
          });
        }
      }).catch((err) => {
        console.log(err);
      });
    }
  }
};

</script>
